<template>

    <body>
        <!-- 总容器 -->
        <div class="wrapper">
            <header>
                <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
                <p>健康档案</p>
                <div></div>
            </header>
            <div class="top-ban"></div>

            <section>
                <img src="@/img/report.png">
                <ul>
                    <li v-for="order in orders" :key="order.orderId">
                        <div class="left">
                            <i class="fa fa-file-text-o"></i>
                            <div>
                                <div class="left" @click="goToReport(order.orderId)">
                                    <p>{{ formatDate(order.orderDate) }} 体检报告</p>
                                    <div class="right">
                                        <i class="fa fa-angle-right"></i>
                                    </div>
                                </div>
                                <p>{{ order.name }}</p>
                            </div>
                        </div>
                        <div class="right" @click="redirectToReport(order.orderId)">
                            <i class="fa fa-angle-right"></i>
                        </div>
                    </li>
                </ul>
            </section>

            <div class="bottom-ban"></div>
            <Footer></Footer>
        </div>
    </body>
</template>

<script>
import axios from 'axios';
import Footer from '@/components/Footer.vue';
import { getSessionStorage } from '../common.js';

export default {
    components: {
        Footer
    },
    data() {
        return {
            orders: []
        };
    },
    created() {
        this.fetchReports();
    },
    methods: {
        fetchReports() {
            const user = getSessionStorage('user');
            const userId=user.userId;

            console.log(user);
            console.log(user.userId);

            if (!user) {
                console.error('用户ID未找到');
                alert('用户ID未找到，请重新登录');
                return;
            }
            axios.get(`http://localhost:8080/report/list?userId=${userId}`)
                .then(response => {
                    if (response.data.code === 200) {
                        this.orders = response.data.orders;
                    } else {
                        alert('查询错误');
                    }
                })
                .catch(error => {
                    console.error(error);
                    alert('查询错误');
                });
        },
        goToReport(orderId) {
            this.$router.push({ name: 'report', params: { orderId } });
        },
        formatDate(date) {
            const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
            return new Date(date).toLocaleDateString(undefined, options);
        }
    }
};
</script>


<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}

header .fa {
    font-size: 8vw;
}

/*********************** footer ***********************/
footer {
    width: 100%;
    height: 14.2vw;
    box-sizing: border-box;
    border-top: solid 1px #E9E9E9;
    background-color: #FFF;

    position: fixed;
    left: 0;
    bottom: 0;
}

footer ul {
    width: 100%;
    height: 14.2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

footer ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: 3vw;
    color: #999;

    user-select: none;
    cursor: pointer;
}

footer ul li .fa {
    font-size: 5vw;
}

/*********************** common样式 ***********************/
.top-ban {
    width: 100%;
    height: 15.7vw;
}

.bottom-ban {
    width: 100%;
    height: 14.2vw;
}

/*********************** section ***********************/
section {
    width: 100%;
}

section img {
    width: 100%;
    display: block;
}

section ul {
    width: 86vw;
    margin: 0 auto;
}

section ul li {
    width: 100%;
    height: 18vw;
    border-bottom: solid 1px #EEE;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section ul li .left {
    display: flex;
    align-items: center;
}

section ul li .left i {
    font-size: 8vw;
    color: #6BB9B6;
    margin-right: 3vw;
}

section ul li .left p:first-child {
    color: #555;
    font-size: 4.2vw;
    font-weight: 600;
}

section ul li .left p:last-child {
    color: #999;
    font-size: 3.2vw;
    font-weight: 600;
    margin-top: 1vw;
}

section ul li .right {
    user-select: none;
    cursor: pointer;
}

section ul li .right i {
    color: #999;
    font-size: 6vw;
}

.left {
    display: flex;
    align-items: center;
}

.right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.right p {
    flex: 1;
    margin: 0;
}

.right i {
    margin-left: auto;
}
</style>